<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/element-ui@2.15.13/lib/theme-chalk/index.min.css"/>
    <script src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/element-ui@2.15.13/lib/index.min.js"></script>
    <script th:src="@{/static/main.js}"></script>
    <style>
        .el-table .dark-row {
            background: #A9A9A9;

    }
        /*::v-deep .el-table tbody .dark-row tr:hover>tr.el-table__cell { background-color: #A9A9A9 }*/
        .el-table--enable-row-hover .el-table__body tr.dark-row:hover>td.el-table__cell{ background-color: #A9A9A9 }
    </style>
</head>
<body>

<el-container id="app">
    <el-main>
        <el-row>
            <el-col :span="20" :offset="2">





        <!--    为空判断    -->
        <div v-if="cartVoList.length<=0">
            <el-empty description="">
                <h1 style="text-align: center">购物车还没有任何商品,快去
                    <el-link @click.prevent="goTo('userapp.html') " type="primary" style="cursor: pointer;font-size: 30px">加购</el-link>
                    吧~</h1>
            </el-empty>

        </div>



        <!--    标题    -->
        <div v-if="cartVoList.length>0" style="margin-top: 10px;text-align: center;font-size: 30px"><h1>我的购物车</h1></div>


        <!--    表格    -->
        <div v-for="cartVo in cartVoList" style="margin-bottom:20px;border: 1px solid #458b74;box-shadow: 5px 5px 3px 0px #CCCCCC;border-radius: 5px">
            <!--店铺名+图-->
            <div class="row" style="background-color:#458b74 ">
                <img :src="cartVo.storeImg" style="width: 60px;height: 60px; border-radius: 50%"/>
                <el-tooltip class="item" effect="dark" content="进入店铺" placement="top-start">
                    <el-link @click="toStoreMenu(cartVo.storeId)" type="warning" v-text="cartVo.storeName" style="font-size: 30px;margin-left: 20px;">主要链接</el-link>
                </el-tooltip>
            </div>
            <!--商品信息-->
            <template style="text-align: center" >
                <el-table
                        :row-class-name="tableRowClassName"
                        :header-cell-style="'text-align:center'"
                        :cell-style="'text-align:center'"
                        ref="multipleTable"
                        :data="cartVo.cartItemList"
                        :row-key="(row) => { return row.productId}"
                        tooltip-effect="dark"
                        style="width: 100%;text-align: center"
                        @selection-change="handleSelectionChange">
                    <el-table-column
                            type="selection"
                            :selectable="checkSelectable"
                            :reserve-selection="true"
                            min-width="5%"
                            style="margin-left: 200px">
                    </el-table-column>
                    <el-table-column
                            prop="productId"
                            label="编号"
                            min-width="5%">
                    </el-table-column>

                    <el-table-column
                            prop="productName"
                            label="商品"
                            min-width="15%">
                    </el-table-column>

                    <el-table-column
                            label="图片"
                            min-width="20%">
                        <template slot-scope="scope">
                            <img :src="scope.row.productImg"
                                 min-width="100" height="100"/>
                        </template>
                    </el-table-column>

                    <el-table-column
                            prop="productPrice"
                            label="单价"
                            min-width="7%">
                        <template slot-scope="scope">
                            <span v-if="scope.row.stockCount != -1" v-text="scope.row.productPrice"></span>
                        </template>
                    </el-table-column>


                    <el-table-column
                            prop="buyCount"
                            label="数量"
                            min-width="25%">
                        <template slot-scope="scope">
                            <div v-if="scope.row.stockCount>10 && scope.row.stockCount != -1">
                                <el-input-number v-model="scope.row.buyCount" @change="updateBuyCount(scope.row.productId,scope.row.buyCount)" :min="1" :max="scope.row.stockCount" label="描述文字"></el-input-number>
                            </div>
                            <div v-if="scope.row.stockCount<=10 && scope.row.stockCount != -1" style="margin-top: 25px">
                                <el-input-number v-model="scope.row.buyCount" @change="updateBuyCount(scope.row.productId,scope.row.buyCount)" :min="1" :max="scope.row.stockCount" label="描述文字"></el-input-number>
                                <div style="font-size: 4px;color: red" v-text="'仅剩'+ scope.row.stockCount + '件'"></div>
                            </div>
                            <div v-if="scope.row.stockCount == -1">
                                <span style="color: red">商 品 已 失 效</span>
                            </div>
                        </template>
                    </el-table-column>


                    <el-table-column
                            prop="sumPrice"
                            label="小计"
                            min-width="8%">
                        <template slot-scope="scope" v-if="scope.row.stockCount != -1">
                            {{scope.row.sumPrice}}
                        </template>
                    </el-table-column>

                    <el-table-column
                            prop="sumPrice"
                            label="操作"
                            min-width="15%">
                        <template slot-scope="scope">

                            <el-popconfirm
                                    @confirm="updateBuyCount(scope.row.productId,0)"
                                    confirm-button-text='确认'
                                    cancel-button-text='取消'
                                    icon="el-icon-info"
                                    icon-color="red"
                                    title="确定删除吗？"
                                    >
                                    <el-button slot="reference" type="danger" icon="el-icon-delete"  >删除</el-button>
                                </el-popconfirm>
                        </template>

                    </el-table-column>
                </el-table>

            </template>
            <div>
                <span> 总价(元): {{cartVo.totalPrice}} </span>
            </div>
        </div>

        <el-row v-if="cartVoList.length>0" :gutter="20"
                style="margin-top: 10px;position:fixed;bottom:0;width: 99%;background-color: white;padding: 3px;">
            <el-col :span="4" :offset="15">
                <div style="line-height: 40px;color: #FF7F50;">已选{{productIds.length}}件，合计:¥{{totalPrice}}元</div>
            </el-col>
            <el-col :span="2">
                <el-button type="success" @click="toOrderPreview">结算</el-button>
            </el-col>
        </el-row>

            </el-col>
        </el-row>
    </el-main>
</el-container>


</body>
</html>

<script>

    console.log(".........myCart...........")

    let myCart = new Vue({
        el: "#app"
        ,
        data: {
            cartVoList: [],
            totalPrice: '0.00',
            productIds: [],
            visible: false

        }
        ,
        methods: {
            initCartItemList() {
                let _this = this;
                if (_this.productIds.length < 1){
                    $.post("/cart/updateCart", function (data) {
                        if (data){
                            _this.$alert("购物车商品数量发生变化！")
                        }
                        $.post("/cart/getAllCartVos", function (data) {
                            _this.cartVoList = data;
                            _this.totalPrice = "0.00";
                        });
                    });
                }else{
                    this.calTotalPrice();
                }
                console.log(this.cartVoList);
            }
            ,
            updateBuyCount(productId, buyCount) {
                let _this = this;
                let params = {
                    productId: productId,
                    buyCount: buyCount
                };
                console.log(params);
                $.post("/cart/updateBuyCount",params, function (data) {
                            _this.initCartItemList();
                            if (data != null && document.getElementsByClassName('el-message').length == 0){
                                _this.$message(data);
                            }
                    }
                )
            }
            ,
            calTotalPrice() {
                let _this = this;
                $.post("/cart/calPrice", {
                    productIds: this.productIds,
                    excludeOthers: false
                }, function (data) {
                    _this.cartVoList = data.cartVoList;
                    _this.totalPrice = data.totalPrice;
                })
            }
            ,
            toOrderPreview() {
                let _this = this;
                if (this.productIds.length < 1){
                    _this.$alert("请选择您要结算的商品！");
                    return;
                }
                $.get("/cart/updateCart",function (data) {
                    if(!data){
                        location.href="/cart/toOrderPreview?productIds="+_this.productIds;
                    }else{
                        _this.$alert("购物车商品数量发生变化！")
                        location.href="/usercartbyel.html"
                    }
                })
            }
            ,
            goTo(work) {
                parent.app.changeActive(work);
            }
            ,
            handleSelectionChange(val) {
                let idArr = [];
                let arr = this.$refs.multipleTable;
                for (let tb in arr) {
                    let sel = arr[tb].selection;
                    console.log(sel);
                    for (let i = 0; i < sel.length; i++) {
                        idArr.push(sel[i].productId);
                    }
                }
                this.productIds = idArr;
                this.initCartItemList();

            }
            ,
            toStoreMenu(storeId){
                location.href="/store/toStoreMenu?storeId="+storeId;
            }
            ,
            tableRowClassName({row, rowIndex}) {
                if (row.stockCount === -1) {
                    console.log(row);
                    return 'dark-row';
                }
                return '';
            }
            ,
            checkSelectable(row){
                return row.stockCount != -1;
            }
        }
        ,
        created() {
            this.initCartItemList();
        }

    });


</script>